<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词列表</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            /* justify-content: center; */
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }

        form {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
            align-items: center;
        }

        table {
            width: 100%;
            max-width: 1000px;
            border-collapse: collapse;
        }

        th, td {
            padding: 8px;
            text-align: center;
        }

        .edit-link {
            text-decoration: none;
            color: inherit;
        }
    </style>
</head>
<body>
    <h1>单词列表</h1>
    <form action="/word_list" method="get">
        <label for="chinese">汉字:</label>
        <input type="text" id="chinese" name="chinese" value="{{ chinese }}">
        <label for="hiragana">平假名:</label>
        <input type="text" id="hiragana" name="hiragana" value="{{ hiragana }}">
        <label for="category">分类:</label>
        <input type="text" id="category" name="category" value="{{ category }}">
        <label for="meaning">中文释义:</label>
        <input type="text" id="meaning" name="meaning" value="{{ meaning }}">
        <button type="submit">筛选</button>
    </form>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>汉字</th>
                <th>平假名</th>
                <th>分类</th>
                <th>中文释义</th>
                <th>添加时间</th>
                <th>上次考核</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for word in words %}
            <tr>
                <td>{{ word[0] }}</td>
                <td>{{ word[1] }}</td>
                <td>{{ word[2] }}</td>
                <td>{{ word[3] }}</td>
                <td>{{ word[4] }}</td>
                <td>{{ word[5] }}</td>
                <td>{{ word[6] }}</td>
                <!-- <td id="addTime{{ loop.index }}">{{ word[5] }}</td>
                <td id="lastTestTime{{ loop.index }}">{{ word[6] }}</td> -->
                <td>
                    <a href="/update_word/{{ word[0] }}" class="edit-link">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
                        </svg>
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
<!-- <script>
    // 处理添加时间
    {% for word in words %}
    const addTimeElement{{ loop.index }} = document.getElementById('addTime{{ loop.index }}');
    const addTimeDate{{ loop.index }} = new Date(addTimeElement{{ loop.index }}.textContent);
    addTimeElement{{ loop.index }}.textContent = addTimeDate{{ loop.index }}.toISOString().split('T')[0];
    // 处理上次考核时间
    const lastTestTimeElement{{ loop.index }} = document.getElementById('lastTestTime{{ loop.index }}');
    if (lastTestTimeElement{{ loop.index }}.textContent) {
        const lastTestTimeDate{{ loop.index }} = new Date(lastTestTimeElement{{ loop.index }}.textContent);
        if(lastTestTimeDate{{ loop.index }} !== undefined && lastTestTimeDate{{ loop.index }}.toString() !== 'Invalid Date'){
            lastTestTimeElement{{ loop.index }}.textContent = lastTestTimeDate{{ loop.index }}.toISOString().split('T')[0];
        }
    }
    {% endfor %}
</script> -->
</html>